<template>
    <a-alert type="success" banner>
        <template #icon>
            <LoginOutlined v-if="props.relaClassify == CONSTANTS.relaClassify.INPUT"/>
            <LogoutOutlined v-if="props.relaClassify == CONSTANTS.relaClassify.OUTPUT" />
            <SettingFilled  v-if="props.relaClassify == CONSTANTS.relaClassify.TOOL"/>
            <StarTwoTone two-tone-color="#52c41a" v-if="props.relaClassify == CONSTANTS.relaClassify.SUB"/>
        </template>
        <template #message><b>{{title}}</b></template>
        <template #description>
            <!-- <AddRela :id="props.id" :cb="loadPageData" v-if="props.relaClassify == CONSTANTS.relaClassify.SUB"/> -->
            <span v-for="pmpItemId in relaList" :key="`pmpItemId_${pmpItemId}`" style="display:block;">
            <PmpItemName :id="pmpItemId"></PmpItemName>  
            <EditRelaMd :mainId="props.id" :relaId="pmpItemId" :classify="props.relaClassify" :canEdit="false"/>
            </span>
        </template>
    </a-alert>
</template>

<script setup>
/**
 * 该组件展示注PmpItem引用的子PmpItem的列表
 * 
 */
import { LoginOutlined, LogoutOutlined,SettingFilled, StarTwoTone } from '@ant-design/icons-vue'
import { ref,onMounted,watch } from 'vue'
import pmpHooks from '@/hooks/PmpHooks.js'
import CONSTANTS from '@/constants/Constants.js'
import AddRela from '@/components/AddRela.vue'
import EditRelaMd from '@/components/EditRelaMd.vue'

const relaList = ref([])
const title = ref('')

const props = defineProps({
    // pmpItem的id
  id: {
    type: String,
    default: () => '',
  },
  // 关系类型 INPUT OUTPUT TOOL SUB,参见后端 com.thd.pmp.constants.RelaClassify.class 或 Constants.js中relaClassify
  relaClassify: {
    type: String,
    default: CONSTANTS.relaClassify.SUB,
  }
})


onMounted(async () => {
    loadPageData()
//   data.value = pmpHooks.loadPmpDictDetail(props.id)
//   title.value = pmpHooks.loadPmpDictDetail(props.id).nameCn
})

watch(
  () => props.id,
  async (v) => {
    loadPageData()
    // data.value = pmpHooks.loadPmpDictDetail(v)
    // title.value = pmpHooks.loadPmpDictDetail(v).nameCn
  }
)

async function loadPageData(){

    if(CONSTANTS.relaClassify.SUB == props.relaClassify){
        title.value = '相关词'
    }
    if(CONSTANTS.relaClassify.INPUT == props.relaClassify){
        title.value = '输入'
    }
    if(CONSTANTS.relaClassify.OUTPUT == props.relaClassify){
        title.value = '输出'
    }
    if(CONSTANTS.relaClassify.TOOL == props.relaClassify){
        title.value = '技术及工具'
    }
    
    const res = await pmpHooks.queryRelaIds(props.id,props.relaClassify);
    // alert(JSON.stringify(res))
    relaList.value = res.result;
}



</script>

<style>

</style>